/*
  学习目标React路由的基本使用
  步骤：
     1. 下包 react-router-dom@5.3
     2. 导入三个组件HashRouter Route Link
     HashRouter 
      作用: 实例化路由, 💥全局只调用一次
      类似: Vue中的new VueRouter
      注意: 包住全部的代码
    Route组件
      作用: 设置路由规则, 作为挂载点
      类似: vue中的规则对象 和 挂载点  二合一
    Link组价:
      作用：跳转路由 to="/路径"
      本质: a标签  router-link
*/

import React, { Component } from 'react';
import { HashRouter, Route, Link } from 'react-router-dom';
export default class App extends Component {
  render() {
    // 3. 使用HashRouter包住所有的代码 -
    return (
      <HashRouter>
        {/* 5. 通过Link组件去跳转 */}
        <Link to="/home">点我调到首页</Link>
        <br />
        <Link to="/my">点我调到我的</Link>
        <br />
        <Link to="/friend">点我调到朋友</Link>
        <div>
          {/* 4. 设置路由规则: Route组件设置
           */}
          <div className="my_home">
            <Route path="/home" component={Home}></Route>
          </div>
          <Route path="/my" component={MyMusic}></Route>
          <Route path="/friend" component={Friend}></Route>
        </div>
      </HashRouter>
    );
  }
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐件</h1>;
}

function Friend() {
  return <h1>我是朋友组件</h1>;
}
